<template>
  <div>
    <el-form ref="ruleForm"
             :model="ruleForm"
             :rules="rules"
             status-icon
             class="demo-ruleForm"
             label-position="left"
             label-width="0px">
      <el-form-item prop="mobile">
        <el-input v-model.trim="ruleForm.mobile"
                  type="text"
                  class="phone-size"
                  prefix-icon="el-icon-mobile-phone"
                  placeholder="请输入手机号"
                  @input="changePhone"
                  @keyup.enter.native="handleSubmit()" />
      </el-form-item>
      <el-form-item prop="code">
        <div class="item-flex">
          <el-input v-model.trim="ruleForm.code"
                    type="text"
                    placeholder="请输入验证码"
                    prefix-icon="el-icon-lock"
                    class="verificationSty"
                    @input="changeCode"
                    @keyup.enter.native="handleSubmit()" />
          <div style="
              height: 25px;
              border-left: 1px solid var(--prev-border-color-grey);
              margin-top: 10px;
            " />
          <el-button v-if="isShowMsgCode"
                     :disabled="sendDisabled"
                     style="color: var(--prev-color-primary); font-size: 14px; border: 0px"
                     @click="handleSend">发送验证码</el-button>
          <el-button v-if="!isShowMsgCode"
                     style="color: var(--prev-color-primary); font-size: 14px; border: 0px"
                     disabled>{{ showTime }}秒后重新发送</el-button>
        </div>
        <div class="text">{{ frequency }}</div>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary"
                   style="width: 100%; height: 45px"
                   :loading="loading"
                   @click.native.prevent="handleSubmit()">登 录
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 图形验证码 -->
    <el-dialog top="32vh"
               append-to-body
               width="480px"
               :visible.sync="pictureShow"
               :close-on-click-modal="false">
      <div slot="title">完成拼图验证</div>
      <div v-if="pictureShow"
           class="authen-show">
        <authentication :on-success="success"
                        :on-syntony="picture"
                        width="260"
                        height="120"
                        pl-size="30"
                        deviation="5"
                        :puzzle-img-list="imgLists"
                        class="auth-entication-style"
                        @fatherMethod="pictureShow = false"></authentication>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import loginApi from "@/api/modules/login";
import { Decrypt } from "@/libs/crypto";
import Authentication from "../enroll/Authentication.vue";
// import { graphicalValidate } from '@/api/modules/enroll'
export default {
  name: "PhoneLogin",
  components: { Authentication },
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      ruleForm: {},
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: "请輸入正确手机号格式",
            trigger: "blur"
          }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      // loading: false,
      isShowMsgCode: true,
      sendDisabled: true,
      showTime: null,
      pictureShow: false,
      imgLists: [],
      verify: "",
      frequency: ""
    };
  },
  methods: {
    handleSend () {
      this.picture();
    },
    success () {
      this.pictureShow = false;
      this.loginCodeSend(this.ruleForm);
    },
    blankSpaceVaild (val) {
      if (val && val.match(/\s/g, '')) {
        val = val.replace(/\s/g, '');
      }
      return val;
    },
    changePhone (val) {
      let value = this.blankSpaceVaild(val);
      this.ruleForm.mobile = value;
      let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      reg.test(value) ? (this.sendDisabled = false) : (this.sendDisabled = true);
    },
    changeCode (val) {
      let value = this.blankSpaceVaild(val);
      this.ruleForm.code = value;
    },
    handleSubmit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("login", this.ruleForm);
        } else {
          return false;
        }
      });
    },
    picture () {
      loginApi.phoneLoginCaptcha().then((res) => {
        let { iv, imageUrl, imageName, beginX, beginY, endX, endY } = res.data;
        this.ruleForm.requestId = iv;
        const imtUrl = Decrypt(imageUrl, iv, iv) + Decrypt(imageName, iv, iv);
        this.imgLists.push(imtUrl);
        const [o1, o2, o3, o4, o5] = [
          Decrypt(beginX, iv, iv),
          Decrypt(beginY, iv, iv),
          Decrypt(endX, iv, iv),
          Decrypt(endY, iv, iv),
          Decrypt(imageUrl, iv, iv)
        ];
        const verifyList = o5 + iv + o1 + o2 + o3 + o4;
        this.ruleForm.captcha = this.$md5(verifyList);
        this.pictureShow = true;
      });
    },
    sendOutTime () {
      this.isShowMsgCode = false;
      this.showTime = 60;
      const authTimeTimer = setInterval(() => {
        this.showTime--;
        if (this.showTime <= 0) {
          this.isShowMsgCode = true;
          clearInterval(authTimeTimer);
        }
      }, 1000);
    },
    async loginCodeSend (ruleForm) {
      let data = await loginApi.phoneLoginSmsCode(ruleForm);
      if (data.code === 0) {
        if (data.data) return (this.frequency = data.data);
        this.sendOutTime();
        this.$message.success(data.message);
      } else {
        this.$message.error(data.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.item-flex {
  display: flex;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.authen-show {
  width: 100%;
  text-align: center;
  z-index: 999;
  height: 100%;
}
.text {
  color: var(--prev-icon-color-orange);
  font-size: 12px;
  line-height: 20px;
}
.demo-ruleForm >>> .el-input__prefix {
  font-size: 14px;
}
/deep/ .el-input__inner {
  font-size: 14px;
  height: 45px !important;
}
.verificationSty {
  /deep/ .el-input__inner {
    font-size: 14px;
    height: 45px !important;
    line-height: 45px;
    border: 0px;
  }
  /deep/ .el-input__prefix {
    font-size: 21px;
    line-height: 45px;
  }
}
.phone-size {
  /deep/ .el-input__prefix {
    font-size: 21px;
    line-height: 45px;
  }
}
</style>
